%button,
.button {
  background: transparent;
  border: 0;
  cursor: pointer;
  text-decoration: none;

  svg {
    vertical-align: middle;
  }

  &:disabled,
  &[disabled] {
    opacity: 0.6;
    pointer-events: none;
  }
}

%material-button,
.material-button {
  @extend %button;
  @extend %overlay;
  @extend %type--small;
  @include apply-utility('font', 'google-sans');
  border-radius: get-size(100);
  color: var(--button-color, inherit);
  padding: get-size(200) get-size(400);
  white-space: nowrap;

  &:disabled,
  &[disabled] {
    opacity: 0.6;
    pointer-events: none;
  }
}

// Note: Because text buttons define their own left and top margin, they should
// typically be wrapped in a containing div for positioning.
// The negative margin makes the text inside of the text button line up with
// the left edge of any text above it.
.button-text {
  $padding: #{get-size(200)};
  margin-left: -$padding;
  margin-top: -$padding;
  padding: $padding;
}

.button-text + .button-text {
  margin-left: get-size(300);
}

.button-filled {
  position: relative;
  transition: box-shadow 0.1s;
  z-index: 1;
}

.button-filled::before { // Color overlay
  background: rgba(var(--rgb-button-overlay), 1);
  border-radius: inherit;
  bottom: 0;
  content: '';
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity 0.1s;
  z-index: -1;
}

.button-filled:hover {
  box-shadow: rgba(var(--rgb-button-overlay), 0.3) 0 1px 2px 0, rgba(var(--rgb-button-overlay), 0.15) 0 1px 3px 1px;
}

.button-filled:active {
  box-shadow: rgba(var(--rgb-button-overlay), 0.3) 0 1px 2px 0, rgba(var(--rgb-button-overlay), 0.15) 0 2px 6px 2px;
}

.button-filled:hover::before {
  opacity: 0.16;
}

.button-filled:focus::before {
  opacity: 0.24;
}

.button-filled:active::before {
  opacity: 0.36;
}

.button-round {
  border-radius: get-size(400);
}

.button-collapsible {
  @include media-query('md-max') {
    border-radius: 0;
    padding: 0;
  }
}
